<template>
  <div class="rating-wrapper">
    <div class="rating-header">
      <div class="score-info border-1px">
        <div class="score">{{seller.score}}</div>
        <div class="score-title">综合评分</div>
        <div class="rankRate">高于周边商家{{seller.rankRate}}%</div>
      </div>
      <div class="service-info">
        <div class="service-score">
          <span class="title">服务评分</span><star :score="seller.serviceScore" :size="36"></star><span class="score">{{seller.serviceScore}}</span>
        </div>
        <div class="food-score">
          <span class="title">产品评分</span>
          <star :score="seller.foodScore" :size="36"></star>
          <span class="score">{{seller.foodScore}}</span>
        </div>
        <div class="deliver-time">
          <span class="title">送达时间</span><span class="time">{{seller.deliveryTime}}分钟</span>
        </div>
      </div>
    </div>
    <split></split>
    <ratingselect :ratingObj="ratingObj" @select="selectType"></ratingselect>
    <ul class="rating-list">
      <li class="rating-item border-1px" v-for="rating in currentRatings" :key="rating.ratetime">
        <div class="rating-avatar">
          <img class="avatar" :src="rating.avatar" width="28" height="28">
        </div>
        <div class="rating-content">
          <div class="user">
            <div class="rating-title">{{rating.username}}</div>
            <div class="time">{{rating.rateTime | filterDate}}</div>
          </div>
          <div class="delivery-info">
            <star :score="rating.score" :size="24"></star>
            <span class="time" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
          </div>
          <div class="text">{{rating.text}}</div>
          <div class="rating-type">
            <i :class="{'icon-thumb_up': rating.rateType===0, 'icon-thumb_down': rating.rateType===1}" ></i><span class="type" v-for="(recommend, index) in rating.recommend" :key="index">{{recommend}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import star from 'components/star/star.vue'
import split from 'components/split/split.vue'
import ratingselect from 'components/ratingSelect/ratingSelect.vue'
import {formatDate} from 'common/js/date.js'

const ALL = 0
const COMMEND = 1
const COMPLAIN = 2
export default {
  props: {
    seller: {
      type: Object
    }
  },
  data () {
    return {
      ratings: [],
      currentRatings: [],
      ratingObj: {
        'allCount': 0,
        'commendCount': 0,
        'complainCount': 0
      }
    }
  },
  created() {
    this.$http.get('/api/ratings').then((response) => {
      let body = response.body
      if (!body.errno) {
        this.ratings = body.data
        this._initRatingObj()
      }
    })
  },
  methods: {
    selectType(clickType) {
      let arr = []
      switch (clickType.type) {
          case ALL: 
              arr = this.allArr.slice()
              break
          case COMMEND:
              arr = this.commendArr.slice()
              break
          case COMPLAIN:
              arr = this.complainArr.slice()
              break
      }
      if (clickType.checked) {
          arr = this._filterContent(arr.slice())
      }
      this.currentRatings.splice(0)
      while (arr.length) {
          this.currentRatings.push(arr.pop())
      }
    },
    _filterContent(arrs) {
      if (arrs.length) {
        let arr = arrs.filter((item) => {
          if (item.text !== '' || item.text) {
            return item
          }
        })
        return arr
      }
      return []
    },
    _initRatingObj() {
      this.allArr = this.ratings
      this.currentRatings = this.allArr.slice()
      this.commendArr = this._filterRating(0)
      this.complainArr = this._filterRating(1)
      this.ratingObj['allCount'] = this.ratings.length
      this.ratingObj['commendCount'] = this.commendArr.length
      this.ratingObj['complainCount'] = this.complainArr.length
    },
    _filterRating(type) {
      let arr = []
      arr = this.ratings.filter((item) => {
        if (item.rateType === type) {
          return item
        }
      })
      return arr
    }
  },
  filters: {
    filterDate(time) {
      return formatDate(time, 'yyyy-MM-dd hh:mm')
    }
  },
  components: {
    star,
    split,
    ratingselect
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scroed>
.rating-wrapper
  .rating-header
    display: flex
    padding: 18px 0
    .score-info
      flex: 0 0 137px
      width: 137px
      @media only screen and (max-width:320px)
        flex: 0 0 110px
        width: 110px
      text-align: center
      border-right: 1px solid rgb(230,231,232)
      .score
        font-size: 24px
        color: rgb(255, 153, 0)
        line-height: 28px
        margin-bottom: 6px
      .score-title
        font-size: 12px
        color: rgb(7, 17, 27)
        line-height: 12px
        margin-bottom: 8px
      .rankRate
        font-size: 10px
        color: rgb(147,153,159)
        line-height: 10px
        margin-bottom: 6px
    .service-info
      padding: 0 24px
      @media only screen and (max-width: 320px)
        padding: 0 12px
      fone-size: 12px
      color: rgb(7, 17, 27)
      .service-score, .food-score
        display: flex
        line-height: 18px
        margin-bottom: 8px
        font-size: 12px
        .title
          margin-right: 12px
          @media only screen and (max-width: 320px)
            margin-right: 6px
          line-height: 18px
        .score
          color: rgb(255, 153, 0)
          margin-left: 12px
          line-height: 18px
      .deliver-time
        font-size: 12px
        line-height: 18px
        .title
          margin-right: 12px
        .time
          color: rgb(143, 157, 159)
  .rating-list
    padding: 0 18px
    .rating-item
      padding: 18px 0
      display: flex
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      .rating-avatar
        flex: 0 0 28px
        margin-right: 12px
        margin-bottom: 4px
        width: 28px
        .avatar
          border-radius: 50%
      .rating-content
        flex: 1
        margin-bottom: 6px
        .user
          display: flex
          justify-content: space-between
          font-size: 10px
          line-height: 12px
          margin-bottom: 4px
          .rating-title
            color: rgb(7, 17, 27)
          .time
            color: rgb(147, 153, 159)
        .delivery-info
          display: flex
          margin-bottom: 6px
          .time
            margin-left: 6px
            font-size: 10px
            line-height: 12px
            color: rgb(147,153,159)
        .text
          font-size: 12px
          color: rgb(7, 17, 27)
          line-height: 18px
          margin-bottom: 8px
        .rating-type
          overflow: hidden
          line-height: 18px
          .icon-thumb_up, .icon-thumb_down
            line-height: 16px
            margin-right: 8px
          .icon-thumb_up
            color: rgb(0, 160, 220)
          .icon-thumb_down
            color: #93999f
          .type
            padding: 4px 6px
            vertical-align: top
            font-size: 9px
            color: rgb(147,153, 159)
            line-height: 18px
            border: 1px solid rgba(7, 17,27, 0.1)
            border-radius: 2px
            margin-right: 8px
            &:last-child
              margin: 0
</style>
